@extends('wechat.layouts.application')

@section('content')

    <div class="page-index" id="home" data-log="首页">
        <div class="index-header">
            <div class="search_bar">
                <a href="/search">
                    <span class="icon icon-search"></span>
                    <span class="text">搜索商品名称</span>
                </a>
            </div>
            <div class="search_bottom"></div>
        </div>
        <!--焦点图-->
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">

                    @foreach($sidles as $sidle)
                        <li>
                            <a href="{{$sidle->url}}"><img src="{{$sidle->image}}"/></a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>

        <!--推荐商品-->
        <div class="list">
            <div class="section">
                <div class="mcells_auto_fill">
                    <div class="body">

                        @foreach($banners as $banner)
                            <div>
                                <div class="items">
                                    <a href="{{$banner->url}}"><img src="{{$banner->image}}"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            @foreach($goods as $good)
                <div class="section" id="container" onclick="location.href='/good/{{$good->id}}'">
                    <div>
                        <div class="item">
                            <div class="img">
                                <img class="ico" src="{{$good->image}}" style="width: 80px;height: 90px;">
                                @if($good->is_hot == 1)
                                    <img class="tag " src="/vendor/home/wechat/assets/img/hot.png">
                                @elseif($good->is_new == 1)
                                    <img class="tag " src="/vendor/home/wechat/assets/img/new.png">
                                @endif
                            </div>
                            <div class="info">
                                <div class="name"><p>{{$good->name}}</p></div>
                                <div class="brief"><p>{{$good->description}}</p></div>
                                <div class="price"><p>{{doubleval($good->price)}}元</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
    @include('wechat.layouts._footer')
@endsection

@section('js')
    <script>
        //数据加载时期的gif加载图,用于提示用户数据正在加载!
//        var loadDiv = '<div class="loading"><img src="/vendor/home/wechat/assets/images/loading.gif" width="100px" height="100px" ></div>';
        //监听窗口的鼠标滚轮事件
        $(window).scroll(function () {
            //当滚轮滚动到文档最末位，也就是拉到了最底下
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                //避免多次滚轮触发事件造成图片的多次追加，加上此判断
                if ($('#container').length == 0) {
                    //将图片插入到内部的内容最末位
                    $('#container').append(loadDiv);
                }
                //发送ajax请求获取数据
                $.ajax({
                    type: "POST",
                    url: "load.php",
                    success: function (data) {
                        //加载成功,移除用于提示用户的动态gif图片
//                        $('#container .loading').remove();
                        //追加后端返回的数据
                        $('#container').append(data);
                    }
                });
            }
        });
    </script>
@endsection